<template>
  <Row>
    <div class="header">
      <i-col span="12">
        <div class="logo">
          <img src="../../../static/img/logo.png" alt="">
        </div>
      </i-col>
      <i-col span="12">
          <div class="user-name">
            <span class="spa spa1">{{username}}</span>
            <span class="spa spa2" @click="out()">安全退出</span>
          </div>
      </i-col>
    </div>
  </Row>
</template>

<script>
  import bus from '../bus';
  export default {
    data() {
      return {
        message:'3',
        name:'',
      }
    },
    computed:{
      //名字显示
      username(){
        let username = localStorage.getItem('ms_user');
        return username ? username : this.name;
      }
    },
    methods:{
      /*安全退出*/
      out(){
        localStorage.removeItem('ms_user');
        this.$router.push('/login');
      }
    },
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #000;
    border-bottom: 1px solid rgba(228, 228, 228, 1);
  }
  .header .logo{
    height: 60px;
  }
  .header .logo img{
    height: 59px;
    padding: 0 15px;
  }
  .header .user-name{
    float: right;
    padding-right: 20px;
  }
  .header .user-name .spa{
    padding: 0 5px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
  }
  .header .user-name .spa1{
    color: #0000CC;
    padding: 0 5px;
    cursor:pointer;
  }
  .header .user-name .spa2{
    cursor:pointer;
  }
</style>
